<template>
  <!-- @click="CurrentNum = 9" -->
  <div class="box">
    <div class="item_1">
      <div class="item_1_top">
        <img
          class="item_1_img"
          src="https://www.diantangkeji.com:8084/static/20250510/b7a9781e861f456c82cdd402dd82af1b.png"
          alt=""
        />
        <!-- <div class="item_1_text">殿堂学术</div> -->
      </div>
      <div class="item_1_content">
        <div>
          <img
            class="item_1_img_size"
            src="https://www.diantangkeji.com:8084/static/weixin1727125949657.png"
            alt=""
          />
          <div class="item_1_img_text">微信</div>
        </div>
        <div>
          <img
            class="item_1_img_size"
            src="https://www.diantangkeji.com:8084/static/43ca4b0f0109cd6dcbeae39e0af8deea1731862910752.jpg"
            alt=""
          />
          <div class="item_1_img_text">公众号</div>
        </div>
        <div>
          <img
            class="item_1_img_size"
            src="https://www.diantangkeji.com:8084/static/xiaohongshu1727126044570.png"
            alt=""
          />
          <div class="item_1_img_text">小红书</div>
        </div>
      </div>
    </div>
    <div class="item_2">
      <div class="item_2_title">产品与服务</div>
      <div class="item_2_content">
        <div class="item_2_content_hover" @click="CurrentSelection(1)">
          海外优青申请
        </div>
        <div class="item_2_content_hover" @click="CurrentSelection(4)">
          科研绘图
        </div>
      </div>
      <div class="item_2_content">
        <div class="item_2_content_hover" @click="CurrentSelection(2)">
          人才项目申请
        </div>
        <div class="item_2_content_hover" @click="CurrentSelection(5)">
          PPT美化
        </div>
      </div>
      <div class="item_2_content">
        <div class="item_2_content_hover" @click="CurrentSelection(3)">
          国自然申请
        </div>
        <div class="item_2_content_hover" @click="CurrentSelection(6)">
          科研资料
        </div>
      </div>
    </div>
    <div class="item_3">
      <div class="item_3_title">关于我们</div>
      <div class="item_3_content">
        <div style="cursor: pointer" @click="ContactUs">公司介绍</div>
      </div>
    </div>
    <div class="item_4">
      <div class="item_4_title">联系我们</div>
      <div class="item_4_content">
        <div>咨询热线：13777413190</div>
      </div>
      <div class="item_4_content">
        <div>邮 箱：diantangkj@163.com</div>
      </div>
      <div class="item_4_content">
        <div>
          公司地址：浙江省杭州市萧山区宁围街道建设三路733号信息港五期10号楼213室
        </div>
      </div>
    </div>
    <div class="foot_bottom">
      2024 杭州殿堂科技有限公司版权所有 浙ICP备2024138639号-1
    </div>
  </div>
</template>
<script>
export default {
  name: "header",
  props: {
    // url: {
    //   type: String,
    //   default: function () {
    //     return "";
    //   },
    // },
  },
  data() {
    return {};
  },
  methods: {
    ContactUs() {
      this.$router.push({
        name: "companyprofileInfo",
      });
    },
    CurrentSelection(index, value) {
      this.CurrentNum = index;
      if (value == undefined) {
        value = index;
      }
      switch (value) {
        case 0:
          this.$router.push({
            name: "home",
          });
          break;
        case 1:
          this.$router.push({
            name: "OverseasOutstandingYouth",
          });
          break;
        case 2:
          this.$router.push({
            name: "TalentProject",
          });
          break;
        case 3:
          this.$router.push({
            name: "NationalNatural",
          });
          break;
        case 4:
          this.$router.push({
            name: "ScientificResearchDrawings",
          });
          break;
        case 5:
          this.$router.push({
            name: "ppt",
          });
          break;
        case 6:
          this.$router.push({
            name: "ResearchInformation",
          });
          break;
        case 8:
          this.$router.push({
            name: "searchInput",
          });
          break;
        case 20:
          this.$router.push({
            name: "ThesisGuidance",
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.box {
  position: relative;
  margin: 0 auto;
  width: 1920px;
  height: 461px;
  background: #222629;
  /* 其他样式设置，比如背景尺寸、重复等 */
  background-size: cover; /* 让背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中显示 */
  box-sizing: border-box;
  padding: 0 309px;
  display: flex;
  border: 1px solid #222629;
}
.item_1 {
  width: 410px;
  height: 220px;
  margin-top: 73px;
}
.item_1_top {
  display: flex;
  align-items: center;
  margin-bottom: 52px;
}
.item_1_img {
  width: 280px;
  height: 65px;
}
.item_1_text {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: bold;
  font-size: 32px;
  color: #ffffff;
  margin-left: 15px;
}
.item_1_content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.item_1_img_size {
  width: 108px;
  height: 108px;
}
.item_1_img_text {
  text-align: center;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 14px;
  color: #a7a8a9;
  margin-top: 5px;
}
.item_2 {
  margin-top: 87px;
  margin-left: 21px;
  width: 190px;
  display: flex;
  flex-direction: column;
}
.item_2_title {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 18px;
}
.item_2_content {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 15px;
  color: #717375;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.item_2_content_hover {
  cursor: pointer;
}
.item_2_content_hover:hover {
  cursor: pointer;
  color: #fff;
}
.item_3 {
  margin-top: 87px;
  margin-left: 100px;
  width: 65px;
  display: flex;
  flex-direction: column;
}
.item_3_title {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 18px;
}
.item_3_content {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 15px;
  color: #717375;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.item_3_content:hover {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 15px;
  color: #4257fc;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.item_4 {
  width: 418px;
  margin-top: 87px;
  margin-left: 104px;
  display: flex;
  flex-direction: column;
}
.item_4_title {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 18px;
}
.item_4_content {
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-weight: 500;
  font-size: 15px;
  color: #717375;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.foot_bottom {
  border-top: 1px solid #393c3f;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1920px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  font-family: "SourceHanSansSC, SourceHanSansSC";
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
}
</style>
